<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/splash/splash-icon.png">
<link rel="apple-touch-startup-image" href="images/splash/splash-screen.png" 			media="screen and (max-device-width: 320px)" />  
<link rel="apple-touch-startup-image" href="images/splash/splash-screen_402x.png" 		media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" /> 
<link rel="apple-touch-startup-image" sizes="640x1096" href="images/splash/splash-screen_403x.png" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="images/splash/splash-screen-ipad-landscape" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="images/splash/splash-screen-ipad-portrait.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)" />
<link rel="apple-touch-startup-image" sizes="1536x2008" href="images/splash/splash-screen-ipad-portrait-retina.png"   media="(device-width: 768px)	and (orientation: portrait)	and (-webkit-device-pixel-ratio: 2)"/>
<link rel="apple-touch-startup-image" sizes="1496x2048" href="images/splash/splash-screen-ipad-landscape-retina.png"   media="(device-width: 768px)	and (orientation: landscape)	and (-webkit-device-pixel-ratio: 2)"/>

<title>Ciuten</title>

<link href="styles/style.css"     		rel="stylesheet" type="text/css">
<link href="styles/framework.css" 		rel="stylesheet" type="text/css">
<link href="styles/owl.carousel.css" 	 rel="stylesheet" type="text/css">
<link href="styles/owl.theme.css" 		rel="stylesheet" type="text/css">
<link href="styles/swipebox.css"		 rel="stylesheet" type="text/css">
<link href="styles/colorbox.css"		 rel="stylesheet" type="text/css">

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jqueryui.js"></script>
<script type="text/javascript" src="scripts/owl.carousel.min.js"></script>
<script type="text/javascript" src="scripts/jquery.swipebox.js"></script>
<script type="text/javascript" src="scripts/colorbox.js"></script>
<script type="text/javascript" src="scripts/snap.js"></script>
<script type="text/javascript" src="scripts/contact.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>
<script type="text/javascript" src="scripts/framework.js"></script>
<script type="text/javascript" src="scripts/framework.launcher.js"></script>


</head>
<body>

<div id="preloader">
	<div id="status">
    	<p class="center-text">
			Loading the content...
            <em>Loading depends on your connection speed!</em>
        </p>
    </div>
</div>

<div class="top-deco"></div>

<div class="content">
	<div class="header">
    	<a href="#" class="homepage-logo">
        	<img src="images/misc/logo.png" alt="img">
        </a>
        <a href="index.html" class="go-home">HOME</a>
        <a href="#" class="go-menu">MENU</a>
        <a href="#" class="go-back">CLOSE</a>
    </div>
    <div class="decoration"></div>
    
    <div class="navigation">
    	<div class="corner-deco"></div>
    	<div class="navigation-wrapper">
            <div class="navigation-item">
                <a href="index.html" class="home-icon">Homepage</a>
                <em class="inactive-menu"></em>
            </div>
            <div class="navigation-item">
                <a href="#" class="features-icon has-submenu">Features</a>
                <em class="dropdown-menu"></em>
              	<div class="submenu">
                    <a href="type.html">Typography		 <em></em></a>
                    <a href="jquery.html">jQuery		   <em></em></a>
                </div>
            </div>
            <div class="navigation-item">
                <a href="#" class="portfolio-icon has-submenu">Portfolios</a>
                <em class="dropdown-menu dropup-menu"></em>
                <div class="submenu active-submenu">
                	<a href="tile-folio.html">Tile Portfolio	<em class="selected-submenu"></em></a>
                    <a href="one-column.html">One Column		<em></em></a>
                    <a href="two-column.html">Two Column		<em></em></a>
                    <a href="three-column.html">Three Columns <em></em></a>
                </div>
            </div>
            <div class="navigation-item">
                <a href="#" class="gallery-icon has-submenu">Gallery</a>
                <em class="dropdown-menu"></em>
                <div class="submenu">
                	<a href="tile-gallery.html">Tile Gallery<em></em></a>
                    <a href="thumbnail-gallery.html">Thumb Gallery<em></em></a>
                </div>
            </div>
            <div class="navigation-item">
                <a href="videos.html" class="videos-icon">Videos</a>
                <em class="inactive-menu"></em>
            </div>
            <div class="navigation-item">
                <a href="contact.html" class="contact-icon">Contact</a>
                <em class="inactive-menu"></em>
            </div>
        </div>
    </div>
</div>

   
    <div class="wide-item-wrapper">
        <div class="wide-item">
            <div class="wide-item-titles">
                <h4>One Column</h4>
                <p>Add a caption, tap the image, and see the result!</p>
            </div>
            <div class="wide-image">
                <div class="overlay"></div>
                <a class="tile-wide" href="#"><img class="responsive-image" src="images/general-nature/6w.jpg" alt="img"></a>
            </div>
            <div class="wide-active">
                <div class="content">
                    <div class="container no-bottom">
                        <div class="portfolio-item-full-width">
                            <a href="images/general-nature/1.jpg">
                                <img class="responsive-image" src="images/general-nature/1w.jpg" alt="img">
                            </a>
                            <h4>A full width portfolio item!</h4>
                            <p>We like portfolios a lot! We've optimized them to the extreme to make them work like a charm on mobiles!</p>
                        </div>
                        <div class="decoration"></div>
                        <div class="portfolio-item-full-width">
                            <a href="images/general-nature/2.jpg">
                                <img class="responsive-image" src="images/general-nature/2w.jpg" alt="img">
                            </a>
                            <h4>A full width portfolio item!</h4>
                            <p>We like portfolios a lot! We've optimized them to the extreme to make them work like a charm on mobiles!</p>
                        </div>
                        <div class="decoration"></div>
                        <div class="portfolio-item-full-width">
                            <a href="images/general-nature/3.jpg">
                                <img class="responsive-image" src="images/general-nature/3w.jpg" alt="img">
                            </a>
                            <h4>A full width portfolio item!</h4>
                            <p>We like portfolios a lot! We've optimized them to the extreme to make them work like a charm on mobiles!</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="wide-item">
            <div class="wide-item-titles">
                <h4>Two Columns</h4>
                <p>Tapping the image will deploy a swipe gallery</p>
            </div>
            <div class="wide-image">
                <div class="overlay"></div>
                <a class="tile-wide" href="#"><img class="responsive-image" src="images/general-nature/5w.jpg" alt="img"></a>
            </div>
            <div class="wide-active">
                <div class="content">
                    <div class="container no-bottom">
                        <div class="portfolio-item-thumb one-half">
                            <a href="images/general-nature/2s.jpg">
                                <img class="responsive-image" src="images/general-nature/1s.jpg" alt="img">
                            </a>
                            <h4>Image Title</h4>
                            <p>
                                Lorem ipsum dolor sit amet, consecr adipiscing elit. 
                            </p>
                        </div>
                        <div class="portfolio-item-thumb one-half last-column">
                            <a href="images/general-nature/1s.jpg">
                                <img class="responsive-image" src="images/general-nature/2s.jpg" alt="img">
                            </a>
                            <h4>Image Title</h4>
                            <p>
                                Lorem ipsum dolor sit amet, consecr adipiscing elit.  
                            </p>
                        </div>  
                        <div class="portfolio-item-thumb one-half">
                            <a href="images/general-nature/3s.jpg">
                                <img class="responsive-image" src="images/general-nature/1s.jpg" alt="img">
                            </a>
                            <h4>Image Title</h4>
                            <p>
                                Lorem ipsum dolor sit amet, consecr adipiscing elit. 
                            </p>
                        </div>
                        <div class="portfolio-item-thumb one-half last-column">
                            <a href="images/general-nature/4s.jpg">
                                <img class="responsive-image" src="images/general-nature/2s.jpg" alt="img">
                            </a>
                            <h4>Image Title</h4>
                            <p>
                                Lorem ipsum dolor sit amet, consecr adipiscing elit.  
                            </p>
                        </div> 
                    </div>
                </div>  
            </div>
        </div>
        <div class="wide-item">
            <div class="wide-item-titles">
                <h4>Three Columns</h4>
                <p>Designed to work perfectly on tablets and mobiles!</p>
            </div>
            <div class="wide-image">
                <div class="overlay"></div>
                <a class="tile-wide" href="#"><img class="responsive-image" src="images/general-nature/4w.jpg" alt="img"></a>
            </div>
            <div class="wide-active">
                <div class="content">
                    <div class="container no-bottom">
                        <div class="portfolio-item-thumb one-third">
                            <a href="images/general-nature/2s.jpg">
                                <img class="responsive-image" src="images/general-nature/1s.jpg" alt="img">
                            </a>
                            <h4>One</h4>
                            <p>
                                Lorem ipsum dolor sit amet, consecr adipiscing elit. 
                            </p>
                        </div>
                        <div class="portfolio-item-thumb one-third">
                            <a href="images/general-nature/2s.jpg">
                                <img class="responsive-image" src="images/general-nature/2s.jpg" alt="img">
                            </a>
                            <h4>Two</h4>
                            <p>
                                Lorem ipsum dolor sit amet, consecr adipiscing elit. 
                            </p>
                        </div>
                        <div class="portfolio-item-thumb one-third last-column">
                            <a href="images/general-nature/1s.jpg">
                                <img class="responsive-image" src="images/general-nature/3s.jpg" alt="img">
                            </a>
                            <h4>Three</h4>
                            <p>
                                Lorem ipsum dolor sit amet, consecr adipiscing elit.  
                            </p>
                        </div>
                        
                        <div class="decoration"></div>
                        
                        <div class="portfolio-item-thumb one-third">
                            <a href="images/general-nature/2s.jpg">
                                <img class="responsive-image" src="images/general-nature/4s.jpg" alt="img">
                            </a>
                            <h4>Four</h4>
                            <p>
                                Lorem ipsum dolor sit amet, consecr adipiscing elit. 
                            </p>
                        </div>
                        <div class="portfolio-item-thumb one-third">
                            <a href="images/general-nature/2s.jpg">
                                <img class="responsive-image" src="images/general-nature/5s.jpg" alt="img">
                            </a>
                            <h4>Five</h4>
                            <p>
                                Lorem ipsum dolor sit amet, consecr adipiscing elit. 
                            </p>
                        </div>
                        <div class="portfolio-item-thumb one-third last-column">
                            <a href="images/general-nature/1s.jpg">
                                <img class="responsive-image" src="images/general-nature/6s.jpg" alt="img">
                            </a>
                            <h4>Six</h4>
                            <p>
                                Lorem ipsum dolor sit amet, consecr adipiscing elit.  
                            </p>
                        </div> 
                    </div>
                </div>   
            </div>
        </div>
        <div class="wide-item">
            <div class="wide-item-titles">
                <h4>Thumbnail Gallery</h4>
                <p>Covering the entire width of the screen, it's beautiful!</p>
            </div>
            <div class="wide-image">
                <div class="overlay"></div>
                <a class="tile-wide" href="#"><img class="responsive-image" src="images/general-nature/3w.jpg" alt="img"></a>
            </div>
            <div class="wide-active">
                <div class="content">
                    <div class="container no-bottom">
                        <h4>Touch swipe gallery!</h4>
                        <p>A gallery is essential in any template, so, if it's a mobile device, why not have a touch one!</p>
                    </div>
                    <ul class="gallery round-thumb">
                        <li><a class="swipebox" href="images/gallery/full/1.jpg" title="An awesome gallery!"><img src="images/general/1s.jpg" alt="img" /></a></li>
                        <li><a class="swipebox" href="images/gallery/full/2.jpg" title="An awesome gallery!"><img src="images/general/2s.jpg" alt="img" /></a></li>
                        <li><a class="swipebox" href="images/gallery/full/3.jpg" title="An awesome gallery!"><img src="images/general/3s.jpg" alt="img" /></a></li>
                        <li><a class="swipebox" href="images/gallery/full/1.jpg" title="An awesome gallery!"><img src="images/general/4s.jpg" alt="img" /></a></li>
                        <li><a class="swipebox" href="images/gallery/full/2.jpg" title="An awesome gallery!"><img src="images/general/5s.jpg" alt="img" /></a></li>
                        <li><a class="swipebox" href="images/gallery/full/3.jpg" title="An awesome gallery!"><img src="images/general/6s.jpg" alt="img" /></a></li>
                        <li><a class="swipebox" href="images/gallery/full/1.jpg" title="An awesome gallery!"><img src="images/general/1s.jpg" alt="img" /></a></li>
                        <li><a class="swipebox" href="images/gallery/full/2.jpg" title="An awesome gallery!"><img src="images/general/2s.jpg" alt="img" /></a></li>
                        <li><a class="swipebox" href="images/gallery/full/3.jpg" title="An awesome gallery!"><img src="images/general/3s.jpg" alt="img" /></a></li>
                    </ul>          	
                </div> 
                
                <div class="decoration"></div>
                
                <div class="content">
                    <div class="container no-bottom">
                        <h4>Touch swipe gallery!</h4>
                        <p>A gallery is essential in any template, so, if it's a mobile device, why not have a touch one!</p>
                    </div>
                    <ul class="gallery square-thumb">
                        <li><a class="swipebox" href="images/gallery/full/1.jpg" title="An awesome gallery!"><img src="images/general/1s.jpg" alt="img" /></a></li>
                        <li><a class="swipebox" href="images/gallery/full/2.jpg" title="An awesome gallery!"><img src="images/general/2s.jpg" alt="img" /></a></li>
                        <li><a class="swipebox" href="images/gallery/full/3.jpg" title="An awesome gallery!"><img src="images/general/3s.jpg" alt="img" /></a></li>
                        <li><a class="swipebox" href="images/gallery/full/1.jpg" title="An awesome gallery!"><img src="images/general/4s.jpg" alt="img" /></a></li>
                        <li><a class="swipebox" href="images/gallery/full/2.jpg" title="An awesome gallery!"><img src="images/general/5s.jpg" alt="img" /></a></li>
                        <li><a class="swipebox" href="images/gallery/full/3.jpg" title="An awesome gallery!"><img src="images/general/6s.jpg" alt="img" /></a></li>
                        <li><a class="swipebox" href="images/gallery/full/1.jpg" title="An awesome gallery!"><img src="images/general/1s.jpg" alt="img" /></a></li>
                        <li><a class="swipebox" href="images/gallery/full/2.jpg" title="An awesome gallery!"><img src="images/general/2s.jpg" alt="img" /></a></li>
                        <li><a class="swipebox" href="images/gallery/full/3.jpg" title="An awesome gallery!"><img src="images/general/3s.jpg" alt="img" /></a></li>
                    </ul>          	
                </div>
            </div>
        </div>
        <div class="wide-item">
            <div class="wide-item-titles">
                <h4>Video Gallery</h4>
                <p>HD graphics make it shine on HiDPI screens!</p>
            </div>
            <div class="wide-image">
                <div class="overlay"></div>
                <a class="tile-wide" href="#"><img class="responsive-image" src="images/general-nature/2w.jpg" alt="img"></a>
            </div>
            <div class="wide-active">
                <div class="content">
                    <div class="container no-bottom">
                        <div class="portfolio-item-full-width">
                            <iframe class="responsive-video" src="../../../../player.vimeo.com/video/7449107"></iframe>
                            <h4>YouTube Video</h4>
                            <p>We like portfolios a lot! We've optimized them to the extreme to make them work like a charm on mobiles!</p>
                        </div>
                        <div class="decoration"></div>
                        <div class="portfolio-item-full-width">
                            <OBJECT><PARAM name="movie" value="MPFLVPlayer.swf" /><PARAM name="allowFullScreen" value="true" /><PARAM name="FlashVars" value="fn=../../../../www.youtube.com/watch@v=9S-RHXlsjyY&flvskin=MPFLVSkin.swf" /><EMBED src="MPFLVPlayer.swf" type="application/x-shockwave-flash" allowFullScreen="true" FlashVars="fn=../../../../www.youtube.com/watch@v=9S-RHXlsjyY&flvskin=MPFLVSkin.swf"></EMBED></OBJECT>ss="portfolio-item-full-width">
                            <iframe class="responsive-video" src="../../../../player.vimeo.com/video/7449107"></iframe>
                            <h4>YouTube Video</h4>
                            <p>We like portfolios a lot! We've optimized them to the extreme to make them work like a charm on mobiles!</p>
                        </div>
                    </div>
                </div>    
            </div>
        </div>
        <div class="wide-item">
            <div class="wide-item-titles">
                <h4>I do nothing!</h4>
                <p>You can add as many images as you want!</p>
            </div>
            <div class="wide-image">
                <div class="overlay"></div>
                <a class="tile-wide" href="#"><img class="responsive-image" src="images/general-nature/1w.jpg" alt="img"></a>
            </div>
        </div>
    </div>
            
    
    
<div class="content">
<div class="decoration"></div>            
    <div class="footer">
        <div class="socials">
            <a href="#" class="twitter-icon"></a>
            <a href="#" class="google-icon"></a>
            <a href="#" class="facebook-icon"></a>
        </div>
        <div class="clear"></div>
        <p class="copyright">
            COPYRIGHT 2014.<br>
            ALL RIGHTS RESERVED
        </p>
    </div> 
    
</div>

<div class="bottom-deco"></div>



</body>
</html>